<template>
  <view class="dashboard-page">
    <!-- 刷新下拉 -->
    <z-paging ref="paging" v-model="refreshData" @query="handleRefresh" :auto="true" :refresher-enabled="true" :paging-enabled="false">
      <up-navbar title="工作台" :autoBack="true" :fixed="true" bgColor="transparent" :border="false" placeholder/>
      
      <!-- 今日待处理事项统计组件 -->
      <PendingTasksStats ref="pendingTasksRef" @refresh="handlePendingTasksRefresh" />

      <!-- 实时数据统计组件 -->
      <RealtimeStats ref="realtimeStatsRef" @refresh="handleRealtimeRefresh" />

      <!-- 快捷操作 -->
      <view class="section quick-actions">
        <view class="section-header">
          <text class="section-title">快捷操作</text>
        </view>
        <view class="actions-grid">
          <view 
            v-for="(action, index) in quickActions" 
            :key="index" 
            class="action-item"
            @click="handleActionClick(action)"
          >
            <view :class="['action-icon', action.iconClass]"></view>
            <text class="action-label">{{ action.label }}</text>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import PendingTasksStats from './components/PendingTasksStats.vue'
import RealtimeStats from './components/RealtimeStats.vue'

const paging = ref(null)
const refreshData = ref([])
const pendingTasksRef = ref(null)
const realtimeStatsRef = ref(null)
const quickActions = ref([])
let autoRefreshTimer = null

// 获取快捷操作
const loadQuickActions = async () => {
  try {
    quickActions.value = [
      { label: '新建工单', iconClass: 'icon-add-workorder', action: 'create_workorder' },
      { label: '巡检记录', iconClass: 'icon-inspection', action: 'inspection_records' },
      { label: '设备管理', iconClass: 'icon-device', action: 'device_management' },
      { label: '数据报表', iconClass: 'icon-report', action: 'data_report' }
    ]
  } catch (error) {
    console.error('获取快捷操作失败:', error)
  }
}

// 处理快捷操作点击
const handleActionClick = (action) => {
  console.log('点击快捷操作:', action)
  // 根据操作类型执行相应动作
  switch (action.action) {
    case 'create_workorder':
      uni.navigateTo({ url: '/pages/workorder/create' })
      break
    case 'inspection_records':
      uni.navigateTo({ url: '/pages/inspection/records' })
      break
    case 'device_management':
      uni.navigateTo({ url: '/pages/device/management' })
      break
    case 'data_report':
      uni.navigateTo({ url: '/pages/report/index' })
      break
  }
}

// 处理待处理事项组件刷新
const handlePendingTasksRefresh = () => {
  console.log('待处理事项数据已刷新')
}

// 处理实时统计组件刷新
const handleRealtimeRefresh = () => {
  console.log('实时统计数据已刷新')
}

// 处理主页面刷新
const handleRefresh = async () => {
  try {
    // 刷新子组件数据
    if (pendingTasksRef.value) {
      await pendingTasksRef.value.refreshData()
    }
    if (realtimeStatsRef.value) {
      await realtimeStatsRef.value.refreshData()
    }
    // 刷新快捷操作
    await loadQuickActions()
    paging.value?.complete()
  } catch (error) {
    console.error('刷新失败:', error)
    paging.value?.complete()
  }
}

// 自动刷新
const startAutoRefresh = () => {
  autoRefreshTimer = setInterval(() => {
    // 自动刷新实时数据
    if (realtimeStatsRef.value) {
      realtimeStatsRef.value.refreshData()
    }
  }, 30000) // 30秒刷新一次实时数据
}

// 停止自动刷新
const stopAutoRefresh = () => {
  if (autoRefreshTimer) {
    clearInterval(autoRefreshTimer)
    autoRefreshTimer = null
  }
}

onMounted(() => {
  loadQuickActions()
  startAutoRefresh()
})

onUnmounted(() => {
  stopAutoRefresh()
})
</script>

<style lang="scss" scoped>
.dashboard-page {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 0 20rpx;
  padding-bottom: 30rpx;
}

.section {
  margin-bottom: 30rpx;
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10rpx);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -8rpx;
  left: 0;
  width: 60rpx;
  height: 4rpx;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 2rpx;
}

.section-subtitle {
  font-size: 28rpx;
  color: #999;
  background: #f8f9fa;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  border: 1rpx solid #e9ecef;
}

/* 待处理事项统计样式 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.stats-item {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12rpx;
  padding: 24rpx;
  text-align: center;
  color: #ffffff;
  overflow: hidden;
}

.stats-item:nth-child(2) {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stats-item:nth-child(3) {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stats-item:nth-child(4) {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stats-item:nth-child(5) {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.stats-number {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.stats-label {
  font-size: 24rpx;
  opacity: 0.9;
}

.stats-icon {
  position: absolute;
  top: 12rpx;
  right: 12rpx;
  width: 32rpx;
  height: 32rpx;
  opacity: 0.3;
}

/* 实时数据统计样式 */
.realtime-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.realtime-item {
  background-color: #fafafa;
  border-radius: 8rpx;
  padding: 20rpx;
  text-align: center;
}

.realtime-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.realtime-label {
  font-size: 24rpx;
  color: #666666;
}

.status-indicator {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
}

.status-indicator.online {
  background-color: #52c41a;
}

.status-indicator.warning {
  background-color: #faad14;
}

.status-indicator.normal {
  background-color: #1890ff;
}

.realtime-number {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 4rpx;
}

.realtime-unit {
  font-size: 20rpx;
  color: #999999;
}

/* 快捷操作样式 */
.actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

@media (min-width: 750rpx) {
  .actions-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.action-item {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 20rpx;
  padding: 40rpx 20rpx;
  text-align: center;
  color: #333;
  transition: all 0.3s ease;
  border: 1rpx solid #e9ecef;
  position: relative;
  overflow: hidden;
}

.action-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s;
}

.action-item:active {
  transform: scale(0.95);
}

.action-item:hover::before {
  left: 100%;
}

.action-icon {
  width: 60rpx;
  height: 60rpx;
  margin: 0 auto 20rpx;
  border-radius: 16rpx;
  position: relative;
  transition: transform 0.3s ease;
}

.action-item:active .action-icon {
  transform: scale(1.1);
}

.action-label {
  font-size: 28rpx;
  font-weight: 500;
  color: #495057;
}

/* 图标样式 - 使用现代化渐变 */
.icon-add-workorder {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.3);
}

.icon-inspection {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  box-shadow: 0 8rpx 20rpx rgba(240, 147, 251, 0.3);
}

.icon-device {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  box-shadow: 0 8rpx 20rpx rgba(79, 172, 254, 0.3);
}

.icon-report {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  box-shadow: 0 8rpx 20rpx rgba(67, 233, 123, 0.3);
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .dashboard-page {
    padding: 0 15rpx;
  }
  
  .section {
    padding: 20rpx;
    margin-bottom: 20rpx;
  }
  
  .section-title {
    font-size: 32rpx;
  }
  
  .section-subtitle {
    font-size: 24rpx;
    padding: 6rpx 12rpx;
  }
  
  .action-item {
    padding: 30rpx 15rpx;
  }
  
  .action-icon {
    width: 50rpx;
    height: 50rpx;
    margin-bottom: 15rpx;
  }
  
  .action-label {
    font-size: 24rpx;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .section {
    background: rgba(255, 255, 255, 0.1);
    border: 1rpx solid rgba(255, 255, 255, 0.2);
  }
  
  .section-title {
    color: #ffffff;
  }
  
  .section-subtitle {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1rpx solid rgba(255, 255, 255, 0.2);
  }
  
  .action-item {
    background: rgba(255, 255, 255, 0.1);
    border: 1rpx solid rgba(255, 255, 255, 0.2);
  }
  
  .action-label {
    color: #ffffff;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section {
  animation: fadeInUp 0.6s ease-out;
}

.section:nth-child(2) {
  animation-delay: 0.1s;
}

.section:nth-child(3) {
  animation-delay: 0.2s;
}

.section:nth-child(4) {
  animation-delay: 0.3s;
}
</style>